<template>
  <!-- 导航栏 -->
  <f7-navbar :style="{ '--bg-color': bgColor, '--color': color}" v-bind="$attrs">
    <f7-nav-left>
      <f7-link icon-f7="chevron_left" @click="handleBack" :icon-size="iconSize" v-if="showback"></f7-link>
      <slot name="nav-left">

      </slot>
    </f7-nav-left>
    <f7-nav-title>
      {{title}}
    </f7-nav-title>
    <f7-nav-right>
      <slot name="nav-right"></slot>
      <!-- <f7-icon f7="ellipsis"></f7-icon> -->
    </f7-nav-right>
  </f7-navbar>
</template>

<script>
export default {
  name: "qm-currentcy-navbar",
  props: {
    title: {
      type: String,
      default: "标题"
    },
    bgColor: {
      type: String,
      default: "#fff"
    },
    color: {
      type: String,
      default: "#000"
    },
    iconSize:{
      type:Number,
      default:25
    },
    showback:{
      type:Boolean,
      default:true
    }
  },
  methods: {
    handleBack () {
      this.$f7.views.current.router.back({force:true})
    }
  }
}
</script>

<style lang="less" scoped>
</style>
